<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情--邻助社区管理系统</title>
    <link rel="stylesheet" href="front/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="front/css/public.css" media="all" />
    <link rel="stylesheet" href="css/content.css" media="all" />
    <link rel="stylesheet" href="css/public.css" media="all" />
</head>
<body>
<!--<script type="text/javascript" src="common/nav.js"></script>-->
<div class='layui-bg-red' style='width: 100%'>
    <ul class='layui-nav nav_left' lay-filter=''>
        <li class='layui-nav-item'><a href='/news'>首页</a></li>
        <li class='layui-nav-item '>
            <a href='newslist.html?categoryId=1'>社区新闻</a>
        </li>
        <li class='layui-nav-item'><a href='newslist.html?categoryId=2'>社区帮助</a></li>
        <li class='layui-nav-item'><a href='newslist.html?categoryId=3'>社区风采</a></li>
        <li class='layui-nav-item'><a href='newslist.html?categoryId=4'>投稿专栏</a></li>
        <div class="search_container">
            <input class="layui-input search_article" type="text" placeholder="输入文章标题">
            <div class="result_container">
            </div>
        </div>
        <button type="button" class="layui-btn" style="margin-top: 15px">搜索</button>
    </ul>
    <ul class='layui-nav nav_right' lay-filter=''>
        <li class='layui-nav-item tologin'>
            <a href='admin?method=toLogin'>登录</a>
        </li>
        <li class='layui-nav-item has-login'>
            <a href='javascript:;' class='username'></a>
            <dl class='layui-nav-child'> <!-- 二级菜单 -->
                <dd><a id='logout'>注销</a></dd>
                <dd><a href='postNewsDetail.html' id='post'>投稿</a></dd>
            </dl>
        </li>
    </ul>
</div>
<div class="container">
    <!--标题-->
    <p class="title"></p>
    <!--作者 时间-->
    <p class="author" style="text-align:center"></p>
    <!--文章内容-->
    <p class="text"></p>
</div>
<div class="container">

    <div class="layui-input-block comment-container">
        <input type="text" class="layui-input comment-input" lay-verify="comment" placeholder="发表你的看法吧">
        <a class="layui-btn layui-btn-sm comment_btn" lay-filter="addComment" lay-submit><i class="layui-icon">&#xe609;</i>发表评论</a>
        <!--评论-->
        <ul class="comment-ul"></ul>
    </div>

</div>
</body>

<script type="text/javascript" src="front/layui/layui.js"></script>
<script type="text/javascript" src="/news/front/js/api.js"></script>
<script type="text/javascript" src="front/js/common.js"></script>
<script type="text/javascript" src="common/public.js"></script>
</html>

<script>
    const param = getRequest();

    layui.use(['layer','element'],function(){
        var element = layui.element;
        var $ = layui.jquery;
        getArticle(param.id);
        function getArticle(id){
            $.ajax({
                url:API_BASE_URL+'/article?method=getArticleById&articleId='+ id,
                method:"GET",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success(res){
                    if (res.code == 200){
                        $(".title").html(res.data.title)
                        $(".author").html(res.data.author+" "+res.data.createTimeStr)
                        $(".text").html(res.data.text)
                    }
                }
            })
            getComments(id);
        }

        function getComments(id){
            $.ajax({
                url:API_BASE_URL+'/comment?method=getComments&articleId='+id,
                method:"GET",
                success(res){
                    console.log(res)
                    if (res.code == 200){
                        var ulobj = $(".comment-container").find("ul");
                        for (let item in res.data){
                            let obj = res.data[''+item+''];
                            ulobj.append('<li style="margin-top:30px;border-bottom: 1px solid #e8e8ee">'+obj.username+' : '+ obj.comment+'</li>');
                        }
                    }
                }
            })
        }

        $(".comment_btn").click(function(){
            let data = {
                comment: $(".comment-input").val(),
                articleId : param.id
            };

            $.ajax({
                url:API_BASE_URL+'/comment?method=addComment',
                method:"POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data:JSON.stringify(data),
                success(res){
                    if (res.code == 200){
                        layer.msg(res.message)
                        $(".comment-input").val("")
                    }
                    if (res.code == 401){
                        layer.msg(res.message+",2秒后自动跳转登录页")
                        setTimeout(function (){
                            window.location.href = API_BASE_URL+'/admin?method=toLogin'
                        },2000)
                    }
                }
            })
        })
    })
</script>